<template>
	<view class="content">
		<!-- 		<view class="new-head">
			<AllHeads name="修改地址" :type="type" @back="back"></AllHeads>
		</view> -->
		<view class="new-nav">
			<view class="nav-big">
				<!-- 姓名 -->
				<view class="big-item">
					<text class="item-p">收货人</text> <input class="item-input" type="text" v-model="editinfo.contacts"
						placeholder="请输入收货人的姓名" />
				</view>
				<!-- 手机号 -->
				<view class="big-item">
					<text class="item-p">手机号</text> <input class="item-input" @blur="onInput" type="text"
						v-model="editinfo.phone" placeholder="请输入手机号码" />
				</view>
				<!-- 选择器 -->
				<!-- #ifdef APP-PLUS -->
				<view class="big-item address_wrap">
					<text class="item-p">所在地区</text>
					<textarea class="item-input" type="text" v-model="editinfo.area" placeholder="请选择所在地区"
						auto-height />
					<view class="AMask" @tap.stop="openAuth('ACCESS_FINE_LOCATION')">
					</view>
				</view>
				<!-- #endif  -->

				<!-- #ifndef APP-PLUS -->
				<view class="big-item address_wrap">
					<text class="item-p">所在地区</text>
					<textarea class="item-input" type="text" v-model="editinfo.area" placeholder="请选择所在地区"
						@tap="onAddress" auto-height />
				</view>
				<!-- #endif  -->
				<!-- 详细地址 -->
				<view class="big-item">
					<text class="item-p">详细地址</text>
					<input class="item-input" type="text" v-model="editinfo.detail" placeholder="请输入详细地址"
						@input="checkInput" />
				</view>
				<view class="big-item">
					<text class="item-p">默认地址</text>
					<switch color="#FE2C55" v-model="editinfo.isDefault" :checked="editinfo.isDefault == 1"
						@change="switch1Change" />
				</view>
			</view>
		</view>
		<view class="new-bottom">
			<button class="bottom-Gbutton" @click="onsubmit">保存地址</button>
			<view class="bottom-one">
			</view>
		</view>

		<permission-popup ref="authpup" type="top" @changeAuth="changeAuth"
			:permissionID="permissionID"></permission-popup>
	</view>
</template>

<script>
	import permissionPopup from "@/components/permission-popup/permission-popup";
	import {
		setTimeout
	} from 'timers';
	import {
		addAddress,
		changdefault
	} from '../../api/apia'
	import {
		mapState
	} from "vuex"
	export default {
		components: {
			permissionPopup
		},
		data() {
			return {
				type: 'arrow-left',
				address: {
					"name": "谦義轩(银盛泰·新空间店)",
					"latitude": 36.111888,
					"longitude": 120.450067,
					"address": "山东省青岛市崂山区翠岭路6号银盛泰·新空间A座F1层",
					"errMsg": "chooseLocation:ok"
				},

				info: [],
				editinfo: {
					"contacts": "",
					"customerId": 0,
					"detail": "",
					"isDefault": 0,
					"latitude": 0,
					"longitude": 0,
					"phone": "",
					'area': "",
					"sex": 0
				},
				permissionID: "",
			}
		},
		computed: {
			...mapState('userInfo', ["Info"])
		},
		methods: {
			// 选择地址
			onAddress() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);

						that.editinfo.latitude = res.latitude;
						that.editinfo.longitude = res.longitude;
						that.editinfo.area = res.address;
					}
				});
			},

			//打开自定义权限目的弹框
			openAuth(permissionID) {
				if (plus.os.name == 'Android') {
					this.permissionID =
					permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
					setTimeout(() => {
						this.$refs['authpup'].open();
					}, 500)
				} else {
					this.onAddress()
				}
			},

			//用户授权权限后的回调
			changeAuth() {
				//这里是权限通过后执行自己的代码逻辑
				console.log('权限已授权，可执行自己的代码逻辑了');
				this.onAddress() //调用相册功能
			},


			//校验手机号
			onInput(event) {
				const phoneRegex =
					/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/; // 中国大陆手机号正则表达式
				const phoneNumber = event.target.value;
				if (phoneRegex.test(phoneNumber)) {
					this.editinfo.phone = event.target.value;
				} else {
					this.editinfo.phone = ''
				}
			},

			back() {
				uni.navigateBack(1)
			},
			switch1Change(e) {
				console.log(e.detail.value);
				this.editinfo.isDefault = e.detail.value ? 1 : 0
			},
			onsubmit() {
				let title = '' //校验不通过提示文字
				if (!this.editinfo.contacts) {
					title = '姓名不能为空'
					this.errorToast(title)
					return false
				} else if (!this.editinfo.phone) {
					title = '手机号码不能为空'
					this.errorToast(title)
					return false
				} else if (!this.editinfo.area) {
					title = '所在地区不能为空'
					this.errorToast(title)
					return false
				} else if (!this.editinfo.detail) {
					title = '详细地址不能为空'
					this.errorToast(title)
					return false
				}
				let params = {
					...this.editinfo
				}
				params.customerId = this.Info.id
				addAddress(params).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: '添加地址成功',
							icon: 'success',
							// duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							// duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}

				})
			},


			checkInput() {
				console.log(123);
			},
			// 失败提示
			errorToast(title) {
				uni.showToast({
					title,
					icon: 'none',
					mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
				});
			},

		},



	}
</script>

<style lang="scss">
	.input1 {
		background-color: #fff;
		border: none;
		// margin-right: 200rpx;
		position: fixed;
		left: 24%;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding: 25rpx;

		.new-head {
			width: 100%;
			padding: 50rpx 0 30rpx 0;
		}

		.new-nav {
			background-color: #fff;
			// padding: 0 30rpx;

			.nav-big {
				.address_wrap {
					position: relative;

					.AMask {
						position: absolute;
						margin-left: 20%;
						width: 80%;
						height: 90%;
					}

				}

				.big-item {
					border-bottom: 2rpx dashed #ccc;
					display: flex;
					align-items: center;
					padding: 24rpx 0;

					.item-p {
						display: inline-block;
						width: 200rpx;
						font-weight: 500;
						font-size: 30rpx;
					}

					.item-input {
						width: 100%;
						// margin-left: 96rpx;
					}
				}


				.big-item:nth-child(5) {
					display: flex;
					justify-content: space-between;
				}


			}
		}

		.new-bottom {
			width: 100%;
			background-color: #fff;
			// padding: 14rpx 40rpx;
			text-align: center;
			margin-top: 70rpx;

			.bottom-Gbutton {
				margin: 14rpx 40rpx 50rpx 40rpx;
				// width: 90%;
				height: 75rpx;
				line-height: 75rpx;
				background: linear-gradient(to right, #ff2a28, #fd6f2b);
				color: #fff;
				border-radius: 15rpx;
				font-size: 30rpx;
			}

			// .bottom-one {
			// 	margin: 14rpx 259rpx 17rpx 259rpx;
			// 	background-color: #000000;
			// 	height: 10rpx;
			// 	border-radius: 15rpx;
			// }
		}
	}
</style>